<template>
    <div id="navigationBar" class="bar-wrap" v-if='showFlag'>
        <!-- 底部导航栏 -->
        <ul>
            <li class="router bar-border" v-for="item in routerItems" @click="showSubRouter(item.id)">
                <router-link :class="`navigationItem_${item.id}`" :to="item.link">{{item.name}}</router-link>
            </li>
        </ul>
        <!-- 子菜单 -->
        <ul v-if="subRouterFlag" class="sub-bar-wrap">
            <li v-for="item in subRouterItems">
                <router-link :to="item.link">{{item.name}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "navigationBar",
        data () {
            return {
                // 菜单栏是否显示
                showFlag: true,
                //浏览器高度
                browserHeight: '',
                // 子菜单是否显示
                subRouterFlag: false,
                // 菜单
                routerItems: [
                    {
                        id: "my_order",
                        name: "查看订单",
                        link: ""
                    },
                    {
                        id: "order_add",
                        name: "新增委托",
                        link: "/dev_main/order_add"
                    },
                    //即为未完成订单
                    // {
                    //     id: "payment",
                    //     name: "待支付订单",
                    //     link: "/dev_main/order_type/2"
                    // },
                    {
                        id: "user_info",
                        name: "我的信息",
                        link: "/dev_main/user_info"
                    }
                ],
                subRouterItems: [
                    {
                        //0为未完成订单
                        id: "orders_incomplete",
                        name: "未完成订单",
                        link: "/dev_main/order_type/0"
                    },
                    {
                        //1为已完成订单
                        id: "orders_complete",
                        name: "已完成订单",
                        link: "/dev_main/order_type/1"
                    }
                ]
            }
        },
        mounted () {
            // 把函数挂载到事件中心
            this.$root.$on('closeSubRouter', this.closeSubRouter.bind(this));
            this.browserHeight = window.outerHeight;
            this.listenerHeight();
        },
        methods: {
            // 显示子菜单
            showSubRouter: function( id ) {
                var _self = this;
                if( id === "my_order" ) {
                    _self.subRouterFlag = !_self.subRouterFlag;
                }
            },
            // 关闭子菜单（点击任意地方）
            closeSubRouter: function( event ) {
                var _self = this;
                if ( event.target.className.indexOf('navigationItem_my_order') < 0 )
                    _self.subRouterFlag = false;
            },
            //监听浏览器高度
            listenerHeight: function() {
                let _self = this;
                window.addEventListener('resize', function() {
                    if(_self.browserHeight > window.outerHeight) {
                        _self.showFlag = false;
                    } else {
                        _self.showFlag = true;
                    }
                })
            }
        }
    }
</script>

<style scoped>
    /* .router-link-active {
      color: red;
    } */
    * {
        box-sizing: border-box;    
    }
    #navigationBar {
        z-index: 8;
        background-color: #fff;
        width: 100vw;
    }
    a {
        text-decoration: none;
        font-size: 1rem;
        color: black;
        text-align: center;
        font-size: .9rem;
    }
    .bar-wrap {
        position: fixed;
        border-top: .05rem solid #ccc;
        bottom: 0;
    }
    .router {
        /* width: 25%; */
        width: 33.3%;
    }
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .bar-wrap li {
        display: inline-block;
        text-align: center;
        height: 3rem;
        line-height: 3rem;
    }
    .bar-border {
        border-right: .05rem solid #d8d8d5;
    }
    .sub-bar-wrap {
        display: inline-block;
        position: absolute;
        bottom: 3rem;
        left: 0;
        /* width: 25%; */
        width: 33.3%;
        background-color: #fff;
        z-index: 8;
        border-left: .05rem solid #d8d8d5;
        border-right: .05rem solid #d8d8d5;
        margin-bottom: .1rem;
        box-shadow: 0px 0.1rem 20px 0px #56565661;
    }
    .sub-bar-wrap li {
        display: inline-block;
        text-align: center;
        height: 3rem;
        width: 100%;
        line-height: 3rem;
        border-top: .05rem solid #d8d8d5;
    }
    li a{
        display: inline-block;
        height: 100%;
        width: 100%;
    }
</style>